<template>
  <div style="width:100%;height:100%" class=" position-relative">
    <div v-if="isMain" class="h-100 position-absolute" style="top:0;z-index:1">
      <div class="h-100">
        <div id="container" style="height: 100%" />
      </div>
    </div>
    <index-header class="position-absolute" style="top:0;z-index:2" />
    <div v-if="isMain" class="w-100 position-relative" style="height:100%">
      <template>
        <!-- <div class="h-100 position-absolute" style="width:100%;height:100%">
          <div style="height:100%">
            <div id="container" style="height:100%" />
          </div>
          <div data-bottom style="height:32%" class="h-100 flex justify-between">
            <div style="width:48%" class="h-100">
              <page-header text="常用农资品种" :ph="270"> <v-chart v-if="optionsCynzcp.isShow" :theme="theme" :options="optionsCynzcp"/></page-header>
            </div>
            <div style="width:48%" class="h-100">
              <page-header text="农资经销商数量" :ph="270"> <v-chart v-if="category.isShow" :theme="theme" :options="category"/></page-header>
            </div>
          </div>
        </div> -->
        <div class="w-100 flex" style="height:87.9%;">
          <div class="gradients-left position-absolute">
            <div class="position-absolute " style="width: 69.5%;height:100%;left:1%;top:0%;margin: 0 1%;">
              <div data-bottom class="h-33">
                <page-header :ph="186" text="人口及行政区划">
                  <div class="h-100 flex flex-center">
                    <div class="flex justify-between" style="width:82%;height:90%;flex-direction: column;">
                      <div>
                        <div class="c-f f-14">区位面积</div>
                        <div class="number-box">
                          <span class="t-big-number">{{ peopleNumber.qwmj }}</span>
                          <span class="f-14 small-number">平方公里</span>
                        </div>
                      </div>
                      <div class="flex justify-between">
                        <div data-33>
                          <div class="c-f f-14">镇办数</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ peopleNumber.xzs }}</span>
                            <span class="small-number">个</span>
                          </div>
                        </div>
                        <div data-33>
                          <div class="c-f f-14">街道办数</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ peopleNumber.xs }}</span>
                            <span class="small-number">个</span>
                          </div>
                        </div>
                        <div data-33>
                          <div class="c-f f-14">镇数</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ peopleNumber.zs }}</span>
                            <span class="small-number">个</span>
                          </div>
                        </div>
                      </div>
                      <div class="flex justify-between">
                        <div data-33>
                          <div class="c-f f-14">行政村数</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ peopleNumber.xzcs }}</span>
                            <span class="small-number">个</span>
                          </div>
                        </div>
                        <div data-33>
                          <div class="c-f f-14">社区数</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ peopleNumber.sqs }}</span>
                            <span class="small-number">个</span>
                          </div>
                        </div>
                        <div data-33>
                          <div class="c-f f-14">常住人口数</div>
                          <div class="number-box">
                            <span class="t-big-number">{{ peopleNumber.czrks }}</span>
                            <span class="small-number">万人</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </page-header>
              </div>
              <div style="height:1%" />
              <div data-bottom class="h-33">
                <page-header text="劳动力人口情况" :ph="250"> <v-chart v-if="pie.isShow" ref="chart" :theme="theme" :options="pie"/></page-header>
              </div>
              <div style="height:1%" />
              <div data-bottom class="h-33">
                <page-header text="新型经营主体" :ph="250">
                  <v-chart v-if="optionsCynzcp.isShow" :theme="theme" :options="optionsCynzcp"
                /></page-header>
              </div>
            </div>
          </div>

          <div class="gradients-bottom" />
          <div class="gradients-right position-absolute">
            <div class="position-absolute gradients-right" style="width: 69.5%;height:100%;right:1%; top:0%;margin: 0 1%;">
              <div data-bottom class="h-33">
                <page-header text="农资经销商数量" :ph="250"> <v-chart v-if="category.isShow" :theme="theme" :options="category"/></page-header>
              </div>
              <div style="height:1%" />
              <div data-bottom class="h-33">
                <page-header text="科研机构" :ph="250"> <v-chart v-if="kyjgdata.isShow" :theme="theme" :options="kyjgdata"/></page-header>
              </div>
              <!-- <div style="height:1%" />
              <div data-bottom data-bottom class="h-24">
                <page-header text="农业专家数量" :ph="172"> <v-chart v-if="nyzjrs.isShow" :theme="theme" :options="nyzjrs"/></page-header>
              </div> -->
              <div style="height:1%" />
              <div data-bottom class="h-33">
                <page-header text="环境源情况" :ph="250"> <v-chart v-if="optionHjyqk.isShow" :theme="theme" :options="optionHjyqk"/></page-header>
              </div>
            </div>
          </div>
          <div class="map-legend">
            <div v-for="item in colorList" :key="item.color" class="flex map-legend-item">
              <div class="map-legend-color" :style="{ background: item.color }" />
              <div class="">{{ item.type }}</div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <router-view v-else class="h-87" />
  </div>
</template>

<script>
import AMap from '@/utils/AMap'
import YlCharts from '@/components/Charts/ylCharts.vue'
import PageHeader from 'header/PageHeader.vue'
import IndexHeader from 'header/IndexHeader2.vue'
import theme from '@/utils/echarts-theme.json'
import echarts from 'echarts'
import { getTowSideStat, getSingleValue, twoPieChartValue, populationDivide, landUse } from '@/api/connector'
import { formatNumber } from '@/utils/app'
import { createInfoWindow } from '@/utils/app'
export default {
  name: 'IndustrialBase',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    YlCharts,
    PageHeader,
    IndexHeader
  },
  data() {
    return {
      map: null,
      amap: '',
      infoWindow: null,
      p1: null,
      p2: null,
      theme: theme,
      starCenter: [108.19848536074164, 34.241771035259845],
      colorList: [
        {
          type: '工业用地',
          color: '#2DAFFF'
        },
        {
          type: '住宅用地',
          color: '#6141FF'
        },
        {
          type: '综合用地',
          color: '#15F0C0'
        },
        {
          type: '商业用地',
          color: '#F3F81A'
        },
        {
          type: '农业用地',
          color: '#F18A48'
        }
      ],
      peopleNumber: {},
      kyjgdata: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
              htmlStr += seriesName + '：' + formatNumber(value) + '家' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '32%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: {
          name: '家',
          // nameTextStyle: {
          //   padding: [50, 0, 0, 0] // 四个数字分别为上右下左与原位置距离
          // },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: []
      },
      nyzjrs: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: []
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      category: {
        isShow: false,
        tooltip: {
          formatter: '{b}经销商<br />{c0}个',
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          name: '个',
          type: 'value'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '13%',
          top: '13%',
          containLabel: true
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      },
      optionsCynzcp: {
        isShow: false,
        // title: {
        //   text: '',
        //   x: 'center',
        //   y: 'center',
        //   textStyle: {
        //     fontSize: 14
        //   }
        // },
        title:[
          {
            text: '',
            left: 'center',
            top: '40%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          {
            id: 'statistic',
            text: "家",
            left: 'center',
            top: '50%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          }
        ],
        tooltip: {
          trigger: 'item',
          // formatter: '{b}: {c}家({d}%)',
          formatter: function(params) {
            var result = ''
            return (result = params.marker + params.name + ' : ' + formatNumber(params.value) + '家  ' + params.percent + ' %</br>')
          },
          confine: true
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 0,
          color: '#E9F7FF',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            center: ['50%', '50%'],
            type: 'pie',
            radius: ['48%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'bottom',
              offset: [0, 50],
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)'
                //   return params.value + ' 家'
                // } else {
                //   return ''
                // }

                return params.percent + '%'
              }
            },
            labelLine: {
              show: true
            },
            data: []
          }
        ]
        // isShow: false,

        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
        //   formatter: function(params, ticket, callback) {
        //     var htmlStr = ''
        //     for (var i = 0; i < params.length; i++) {
        //       var param = params[i]
        //       var xName = param.name // x轴的名称
        //       var seriesName = param.seriesName // 图例名称
        //       var value = param.value // y轴值
        //       var color = param.color // 图例颜色
        //       if (i === 0) {
        //         htmlStr += xName + '<br/>' // x轴的名称
        //       }
        //       htmlStr += '<div>'
        //       htmlStr +=
        //         '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
        //       htmlStr += seriesName + '：' + value + '家' // 圆点后面显示的文本
        //       htmlStr += '</div>'
        //     }
        //     return htmlStr
        //   }
        // },
        // angleAxis: {
        //   type: 'category',
        //   color: '#fff',
        //   data: []
        // },
        // radiusAxis: {
        //   name: '家'
        // },
        // polar: {},
        // series: [],
        // legend: {
        //   show: true,
        //   orient: 'vertical',
        //   right: '0%',
        //   data: []
        // }
      },
      category2: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 1]
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            data: []
          },
          {
            name: '2012年',
            type: 'bar',
            data: []
          }
        ]
      },
      optionHjyqk: {
        isShow: false,
        // backgroundColor: 'rgba(011, 023, 059)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          // formatter: '{a} <br/>{b}: {c} '
          formatter: function(params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              if (params[i].seriesName == '平均气温') {
                relVal +=
                  "<br/><div style='display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 5px;background:" +
                  params[i].color +
                  "'></div>" +
                  params[i].seriesName +
                  ': ' +
                  formatNumber(params[i].value) +
                  '℃'
              } else {
                relVal +=
                  "<br/><div style='display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 5px;background:" +
                  params[i].color +
                  "'></div>" +
                  params[i].seriesName +
                  ': ' +
                  formatNumber(params[i].value) +
                  '万m³'
              }
            }
            return relVal
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            name: '℃',
            position: 'right',
            // axisLine: {
            //   lineStyle: {
            //     color: '#ffffff',
            //     width: 2
            //   }
            // },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            splitLine: {
              // 分割线配置
              lineStyle: {
                color: '#ffffff'
              }
            }
          },
          {
            name: '万m³',
            position: 'left',
            // axisLine: {
            //   lineStyle: {
            //     color: '#ffffff',
            //     width: 2
            //   }
            // }
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            splitLine: {
              // 分割线配置
              lineStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '地表水量',
            type: 'bar',
            stack: '余额',
            yAxisIndex: 1,
            barMaxWidth: 30,
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: '#ffffff' // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: '#ffffff' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: '地下水量',
            type: 'bar',
            stack: '余额',
            barMaxWidth: 30,
            data: [220, 182, 191, 234, 290, 330, 310],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 1,
                      color: '#ffffff' // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: '#ffffff' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: '水资源总量',
            data: [220, 453, 301, 354, 290, 330, 320],
            type: 'line',
            itemStyle: {
              normal: {
                color: '#0088D4'
              }
            }
          }
        ]
      },
      pie: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}万人 ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 10,
          data: [],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '人口数及占比',
            type: 'pie',
            radius: ['55%', '75%'],
            label: {
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)'
                //   return params.value + ' 万人'
                // } else {
                //   return ''
                // }

                return params.percent + '%'
              }
            },
            data: []
          },
          {
            name: '城镇农村人口比例',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '35%'],

            label: {
              show: 'none',
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)'
                //   return params.value + ' 万人'
                // } else {
                //   return ''
                // }

                return params.percent + '%'
              }
            },
            labelLine: {
              show: true
            },
            data: []
          }
        ]
      },
      polar: {
        isShow: false,
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 50, name: '完成率' }]
          }
        ]
      }
    }
  },
  computed: {
    isMain() {
      return this.$route.name === 'industrial-base'
    }
  },
  watch: {
    $route() {
      if (this.isMain) {
        this.initTick()
      }
    }
  },
  mounted() {
    if (this.isMain) {
      this.initTick()
    }
  },
  created() {
    if (this.isMain) {
      this.init()
    }
  },
  methods: {
    initTick() {
      this.$nextTick(() => {
        this.initAMap()
      })
    },
    init() {
      populationDivide({ groupCode: 'RKJXZQH ' }).then((data) => {
        this.peopleNumber = data.body
      })
      getTowSideStat({ groupCode: 'NCJMJTYYZYSCXGDZCSL' }).then((res) => {
        this.category2.legend.data = res.body.dateSet
        this.category2.series.data = res.body.dateValueListMap
        this.category2.yAxis.data = res.body.typeSet
        this.category2.isShow = true
      })

      // 常用农资品种
      // getTowSideStat({
      //   groupCode: 'CYNZPZ'
      // }).then((res) => {
      //   this.optionsCynzcp.legend.data = res.body.typeSet
      //   this.optionsCynzcp.angleAxis.data = res.body.dateSet
      //   // this.category1.series = res.body.typeValueListMap.map((item, index) => {
      //   //   return {
      //   //     data: item
      //   //   }
      //   // })
      //   this.optionsCynzcp.isShow = true
      // })
      // 新型经营主体
      twoPieChartValue({ groupCode: 'XXJYZT' }).then((res) => {
        // const val = res.body
        // // console.log(val)
        // const optionsCynzcp = this.optionsCynzcp
        // this.optionsCynzcp.angleAxis.data = val.dateSet
        // optionsCynzcp.legend.data = val.typeSet
        // var typeValue = val.typeValueListMap
        // var valArr = []
        // var valArrKey = []
        // for (var key in typeValue) {
        //   valArrKey.push(key)
        //   valArr.push(typeValue[key])
        // }
        // // console.log(valArr)
        // Object.keys(valArr).forEach((item, index) => {
        //   // console.log(optionsCynzcp.series)
        //   optionsCynzcp.series.push({
        //     data: valArr[index],
        //     type: 'bar',
        //     coordinateSystem: 'polar',
        //     name: valArrKey[index]
        //   })
        // })
        this.optionsCynzcp.legend.data = res.body.names
        var arr = res.body.values.out
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].name == '种养殖大户') {
            // obj = arr[i]
            // arr.splice(i,1)
            arr[i] = arr.splice(arr.length - 1, 1, arr[i])[0]
            break
          }
        }
        let num = 0
        arr.map((item) => {
          num = num + item.value
        })
        this.optionsCynzcp.title[0].text = formatNumber(num)
        this.optionsCynzcp.series[0].data = arr
        this.optionsCynzcp.isShow = true
      })
      // 科研机构
      getTowSideStat({ groupCode: 'KYJG' }).then((res) => {
        const val = res.body
        const kyjgdata = this.kyjgdata
        kyjgdata.xAxis.data = val.dateSet
        kyjgdata.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((item, index) => {
          kyjgdata.series.push({
            name: item,
            type: 'bar',
            barMaxWidth: 30,
            stack: '余额',
            data: val.typeValueListMap[item]
          })
        })
        kyjgdata.isShow = true
      })
      // 农资经销商数量
      getSingleValue({ groupCode: 'NZJXSGK' }).then((res) => {
        // console.log(res.body)
        this.category.xAxis.data = res.body.names
        this.category.series[0].data = res.body.values
        this.category.isShow = true
      })
      //  劳动力人口情况
      twoPieChartValue({
        groupCode: 'LDLRKQK'
      }).then((res) => {
        this.pie.legend.data = res.body.names
        this.pie.series[1].data = res.body.values.out
        this.pie.series[0].data = res.body.values.inner
        this.pie.isShow = true
        this.toLink(this, 'chart', function(params) {
          console.log(params)
        })
      })
      // NYZJ 农业专家数量
      getSingleValue({
        groupCode: 'NYZJ'
      }).then((res) => {
        this.nyzjrs.legend.data = res.body.names
        this.nyzjrs.series[0].data = []
        // eslint-disable-next-line no-undef
        var i = 0
        var series = []
        for (i = 0; i < res.body.names.length; i++) {
          var item = {
            name: res.body.names[i],
            value: res.body.values[i]
          }
          series.push(item)
        }
        this.nyzjrs.series[0].data = series
        this.nyzjrs.isShow = true
      })
      // 环境源情况
      getTowSideStat({
        groupCode: 'HJYQK'
      }).then((res) => {
        const val = res.body
        const optionHjyqk = this.optionHjyqk
        optionHjyqk.xAxis.data = val.dateSet
        optionHjyqk.legend.data = val.typeSet
        // Object.keys(val.typeValueListMap).forEach((k, i) => {
        //   optionHjyqk.series[i].data = val.typeValueListMap[(optionHjyqk.series[i].name = k)]
        // })
        var typeValueListMap = res.body.typeValueListMap
        var color = ['#CEB711', '#3BB4FF', '#6647FF', '#19C4A1', '#D69114', '#1C6DCC', '#11A0BB', '#11BB82', '#B325C8', '#D3485F']
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
          // console.log(typeValueListMap[key])
        }
        this.optionHjyqk.series = valArrval.map((item, index) => {
          if (valArrKey[index] == '平均气温') {
            return {
              name: valArrKey[index],
              data: valArrval[index],
              yAxisIndex: 0,
              type: 'line'
            }
          } else {
            return {
              name: valArrKey[index],
              data: valArrval[index],
              yAxisIndex: 1,
              type: 'line'
            }
          }
        })
        optionHjyqk.isShow = true
      })
    },
    async initAMap() {
      try {
        const self = this
        this.amap = await AMap()
        var opts = {
          subdistrict: 0,
          extensions: 'all',
          level: 'city'
        }

        var district = new self.amap.DistrictSearch(opts)
        district.search('咸阳市', function(status, result) {
          var bounds = result.districtList[0].boundaries
          var mask = []
          for (var i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]])
          }
          self.map = new self.amap.Map('container', {
            mask: mask,
            center: [108.202996, 34.240281],
            disableSocket: true,
            viewMode: '3D',
            showLabel: false,
            labelzIndex: 130, // 地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。
            pitch: 40, // 俯仰角度，默认0，[0,83]，2D地图下无效 。（自V1.4.0开始支持）
            zoom: 16,
            layers: [
              new self.amap.TileLayer.RoadNet({
                // rejectMapMask:true
              }),
              new self.amap.TileLayer.Satellite()
            ]
          })
          // 添加自定义图层
          self.map.plugin(['AMap.CustomLayer'], function() {
            var size = self.map.getSize()
            var canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
            canvas.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
            canvas.setAttribute('width', size.width)
            canvas.setAttribute('height', size.height)

            self.path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
            self.path.onclick = function() {
              // console.log('svg path clicked')
            }
            var styleText = []
            styleText.push('stroke:#132235')
            styleText.push('fill:#132235')
            styleText.push('fill-opacity:0.6')
            self.path.style.cssText = styleText.join(';')

            canvas.appendChild(self.path)
            var customLayer = new self.amap.CustomLayer(canvas, {
              // zooms: [3, 8],
              alwaysRender: true,
              zIndex: 100
            })
            customLayer.render = self.onRender
            self.map.add(customLayer)
          })

          // 添加高度面
          var object3Dlayer = new self.amap.Object3DLayer({ zIndex: 1 })
          self.map.add(object3Dlayer)
          var height = -8000
          var color = '#0088ffcc' // rgba
          var wall = new self.amap.Object3D.Wall({
            path: bounds,
            height: height,
            color: color
          })
          wall.transparent = true
          object3Dlayer.add(wall)

          // 添加描边
          for (let i = 0; i < bounds.length; i += 1) {
            new self.amap.Polyline({
              path: bounds[i],
              strokeColor: '#99ffff',
              strokeWeight: 4,
              map: self.map
            })
          }
          self.landUse()
        })
      } catch (err) {
        console.error(err)
      }
    },
    buildPath() {
      var path = []
      var center = this.map.lngLatToContainer(this.starCenter)
      for (let k = 0; k < 6; k += 1) {
        var ag = ((Math.PI * 60) / 180) * k
        var x = center.x + Math.cos(ag) * 500000
        var y = center.y + Math.sin(ag) * 500000
        path.push((k === 0 ? 'M' : 'L') + x + ' ' + y)
      }
      return path.join(' ') + ' Z'
    },
    onRender() {
      var newPath = this.buildPath()
      this.path.setAttribute('d', newPath)
    },
    addPolygon(data) {
      const self = this
      const markers = []
      data.forEach((item, index) => {
        const b = []
        const f = JSON.parse(item.coordinate)
        f.map((ite) => {
          b.push(new this.amap.LngLat(ite.lng, ite.lat))
        })
        let color = ''
        this.colorList.map((d) => {
          if (d.type === item.type) {
            color = d.color
          }
        })
        const polygon = new this.amap.Polygon({
          title: item.name,
          data: item,
          path: b,
          strokeColor: color, // 线颜色
          strokeOpacity: 0.2, // 线透明度
          strokeWeight: 10, // 线宽
          fillColor: color, // 填充色
          fillOpacity: 0.8 // 填充透明度
        })
        polygon.on('click', function(e) {
          self.openInfo(e)
        })
        markers.push(polygon)
      })
      const overlayGroups = new this.amap.OverlayGroup(markers)
      this.map.add(overlayGroups)
    },
    openInfo(e) {
      const self = this
      const title = '地块详情'
      const content = []
      const data = e.target.w.data
      content.push('<div class="flex"><div class="w-105">用地类型:</div><div>' + data.type + '</div></div>')
      this.infoWindow = new this.amap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: createInfoWindow(title, content.join('<br/>'), self.map, 0),
        offset: new this.amap.Pixel(16, -45)
      })
      this.infoWindow.open(this.map, e.lnglat)
    },
    landUse(item) {
      landUse().then((res) => {
        this.addPolygon(res.body.data)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.w-105 {
  width: 105;
}
.h-33 {
  height: 32%;
}
.h-24 {
  height: 24.2%;
}
.people-line {
  height: 38px;
  display: flex;
  align-items: center;
  span:first-child {
    color: #fff;
    font-size: 14px;
  }
  span:last-child {
    color: #27befb;
    font-size: 14px;
  }
}
.gradients-right {
  right: 0;
  height: 89.8%;
  z-index: 2;
  width: 36%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-size: auto 100%;
  background-position: 100% 10.2%;
}
.gradients-left {
  height: 89.8%;
  z-index: 2;
  width: 36%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-size: auto 100%;
  background-position: 0 10.2%;
}
.gradients-bottom {
  z-index: 2;
  width: 28%;
  position: absolute;
  bottom: 0;
  left: 36%;
  height: 30%;
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-position: 50% 111%;
}

div[data-bottom] {
  background: url(~@/assets/img/gradients-left.png) no-repeat;
  background-size: 100% 100% !important;
}
.t-big-number {
  font-size: 28px;
  font-family: Myfont;
  font-weight: bold;
  text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(60, 181, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.small-number {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(188, 221, 242, 1);
  margin-left: 6px;
}
.number-box {
  display: flex;
  align-items: center;
}
.map-legend {
  padding: 12px 18px;
  position: fixed;
  left: 27.5%;
  bottom: 3.5%;
  z-index: 1000;
  color: rgba(255, 255, 255, 1);
  background: rgba(18, 33, 53, 0.8);
  border-radius: 4px;
}
.map-legend-color {
  width: 40px;
  height: 18px;
  margin-right: 10px;
}

.map-legend-item {
  margin-bottom: 8px;
  opacity: 1;
}
.map-legend-item:last-child {
  margin-bottom: 0px;
}
div[data-33] {
  width: 33%;
}
</style>
